<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="400px"
      :before-close="handleClose"
    >
      <div>
        <div style="text-align: center; color: red; margin-bottom: 20px">
          拖动二维码可在海报内移动
        </div>
        <div class="img-box" ref="imageDom">
          <img
            style="width: 100%; height: 100%"
            :src="imgObj.materialUrl"
            alt=""
          />
          <img
            ref="qrCode"
            :style="{ left: left + 'px', top: top + 'px' }"
            class="code"
            :src="imgObj.codeImageUrl"
            alt=""
            @mousedown="handleMouseDown"
          />
        </div>
      </div>
      <div style="text-align: center; margin-top: 20px">
        <el-button style="width: 150px" type="primary" size="mini" @click="save"
          >保存海报</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      imgBoxRect: null,
      left: 30, // 初始相对位置
      top: 30, // 初始相对位置
      isDragging: false,
      startPosition: { x: 0, y: 0 },
      imgObj: {},
      dialogVisible: false
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.imgBoxRect = this.$refs.imageDom.getBoundingClientRect();
    });
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    openlog(v) {
      this.dialogVisible = true;
      this.imgObj = v;
    },
    save() {
      let message = this.$message({
        type: "info",
        message: "图片正在导出中~"
      });
      setTimeout(() => {
        html2canvas(this.$refs.imageDom, {
          useCORS: true,
          scale: 2,
          dpi: 300
        }).then(canvas => {
          let url = canvas.toDataURL();
          let download = document.createElement("a");
          download.download = `导出的图片`;
          download.href = url;
          download.click();
          message.close();
        });
      }, 1000);
    },
    handleMouseDown(event) {
      // 计算相对位置
      let boxRect = this.$refs.imageDom.getBoundingClientRect();
      this.startPosition = {
        x: event.clientX - boxRect.left - this.left,
        y: event.clientY - boxRect.top - this.top
      };
      this.isDragging = true;

      // 监听 document 的 mousemove 和 mouseup 事件
      document.addEventListener("mousemove", this.handleDrag);
      document.addEventListener("mouseup", this.handleMouseUp);
    },
    handleDrag(event) {
      if (this.isDragging) {
        // 计算新的位置
        let boxRect = this.$refs.imageDom.getBoundingClientRect();
        let newLeft = event.clientX - boxRect.left - this.startPosition.x;
        let newTop = event.clientY - boxRect.top - this.startPosition.y;

        // 确保不超出 img-box 的边界
        if (newLeft < 0) {
          newLeft = 0;
        }
        if (newTop < 0) {
          newTop = 0;
        }
        if (newLeft + this.$refs.qrCode.clientWidth > boxRect.width) {
          newLeft = boxRect.width - this.$refs.qrCode.clientWidth;
        }
        if (newTop + this.$refs.qrCode.clientHeight > boxRect.height) {
          newTop = boxRect.height - this.$refs.qrCode.clientHeight;
        }

        this.left = newLeft;
        this.top = newTop;
      }
    },
    handleMouseUp() {
      this.isDragging = false;
      // 移除 document 上的 mousemove 和 mouseup 事件监听
      document.removeEventListener("mousemove", this.handleDrag);
      document.removeEventListener("mouseup", this.handleMouseUp);
    }
  }
};
</script>

<style lang="scss" scoped>
.img-box {
  margin: 0 auto;
  width: 300px;
  height: 1600px;
  position: relative;
  overflow: hidden; // 确保超出部分被隐藏
}

.code {
  position: absolute;
  width: 100px; /* 调整宽度和高度以适应设计 */
  height: 100px; /* 调整宽度和高度以适应设计 */
  cursor: pointer; /* 更改光标指示为可点击 */
}
.save-btn {
  text-align: center;
}
</style>
